<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>

    <div class="R">
      <a href="map.html"><img src="/assets/images/map.png" /></a>
    </div>
  </div>

  <!-- 顶部轮播图 -->
  <van-swipe
    v-if="top"
    class="aui-m-slider"
    :autoplay="3000"
    indicator-color="#00EEEE"
  >
    <van-swipe-item v-for="(item, index) in top" :key="index">
      <van-image
        width="100%"
        height="220"
        fit="cover"
        :src="item.thumbs_text"
        @click="TopInfo(item.id)"
      />
    </van-swipe-item>
  </van-swipe>

  <div class="lqgwBox">
    <ul>
      <li>
        <router-link to="/product/index"
          ><img src="/assets/images/quanbu.png" />
          <p>全部商品</p>
        </router-link>
      </li>
      <li>
        <a href="live.html"
          ><img src="/assets/images/zibo.png" />
          <p>商品直播</p></a
        >
      </li>
      <li>
        <router-link to="/coupon/index"
          ><img src="/assets/images/youhui.png" />
          <p>优惠活动</p></router-link
        >
      </li>
      <li>
        <a href="ranking.html"
          ><img src="/assets/images/bandan.png" />
          <p>榜单排行</p></a
        >
      </li>
    </ul>
  </div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <!-- 新品推荐 -->
  <ul class="proul" v-if="news">
    <li v-for="(item, index) in news" :key="index">
      <div class="con">
        <router-link :to="{ path: '/product/info', query: { proid:item.id } }">
          <van-image
            width="100%"
            height="180"
            fit="cover"
            :src="item.thumbs_text"
          />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>

  <!-- 回到顶部 -->
  <van-back-top bottom="12vh" />

  <tabbar />
</template>
<script setup>
import tabbar from "@/components/common/tabbar.vue";
import { getCurrentInstance, onBeforeMount, reactive } from "vue";

const { proxy } = getCurrentInstance();

//创建数据结构
let top = ref([]);
let news = reactive([]);

// const business = proxy.$business.value
// 生命周期
onBeforeMount(() => {
  ProductData();
});

//查询数据
const ProductData = async () => {
  var result = await proxy.$POST({
    url: "/index/index",
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return;
  }

  top.value = result.data.top;
  news = result.data.news;

};

//
const TopInfo = (proid)=>{
  proxy.$router.push({path:'/product/info',query:{proid}})
}
</script>